<template>
	<view class="count" :style="{ buttom: '0px', left: 0 + 'px' }">
		<view class="left f f-a-c  f-d-c" @click="home(1)">
			<image v-if="numBer == 1" style="height: 48rpx;width: 48rpx;" src="/static/tabBar/1.png" mode=""></image>
			<image v-else style="height: 48rpx;width: 48rpx;" src="/static/tabBar/11.png" mode=""></image>
			<view class="colorFon" :class="{active:numBer == 1}">
				首页
			</view>
		</view>
		<view class="left_2  f f-a-c  f-d-c" @click="home(2)">
			<image v-if="numBer == 2" style="height: 48rpx;width: 48rpx;" src="/static/tabBar/2.png" mode=""></image>
			<image v-else style="height: 48rpx;width: 48rpx;" src="/static/tabBar/22.png" mode=""></image>
			<view class="colorFon" :class="{active:numBer == 2}">
				喵友记
			</view>
		</view>
		<view class="left_2 f f-a-c  f-d-c" @click="home(3)">
			<image v-if="numBer == 3" style="height: 48rpx;width: 48rpx;" src="/static/tabBar/3.png" mode=""></image>
			<image v-else style="height: 48rpx;width: 48rpx;" src="/static/tabBar/33.png" mode=""></image>
			<view class="colorFon" :class="{active:numBer == 3}">
				买东西
			</view>
		</view>
		<view class="left_2 f f-a-c  f-d-c" @click="home(4)">
			<image v-if="numBer == 4" style="height: 48rpx;width: 48rpx;" src="/static/tabBar/4.png" mode=""></image>
			<image v-else style="height: 48rpx;width: 48rpx;" src="/static/tabBar/44.png" mode=""></image>
			<view class="colorFon" :class="{active:numBer == 4}">
				我的
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top: {
				type: Number,
				default: 0
			},
			numBer: {
				type: String,
				default: '1'
			}
		},
		data() {
			return {
				state: '1'
			};
		},
		onLoad() {
			// this.state = uni.getStorageSync('state');
		},
		methods: {
			home(data) {
				// uni.setStorageSync('state', data);
				this.state = data;
				if (data == 1) {
					// 首页
					// 第二个搜索
					uni.switchTab({
						url: '/pages/home/index'
					});
					// this.state = 1;
				} else if (data == 2) {
					// 第二个搜索
					uni.switchTab({
						url: '/pages/Meowmate/index'
					});
					// this.state = 2;
				} else if (data == 3) {
					// 第三个
					uni.switchTab({
						url: '/pages/shoop/index'
					});
				} else if (data == 4) {
					// 第四个
					uni.switchTab({
						url: '/pages/my/index'
					});
				}
			}
		}
	};
</script>
<style lang="scss">
	.colorFon {
		color: #cbc2bb;
		font-size: 24rpx;
		font-weight: 600;
	}

	.active {
		color: #f4efeb;
	}

	.count {
		z-index: 9999999999999999;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 75px;
		display: flex;
		// align-items: center;
		padding-top: 20rpx;
		justify-content: space-around;
		background-color: #977961;
		border-radius: 30rpx;
	}
</style>